<template>
	<view style="height: 600rpx;"><qiun-data-charts type="column" :opts="opt" :chartData="chartData" background="none" /></view>
</template>

<script>
export default {
	props: {
		account: {
			type: Array | Object,
			default() {
				return null;
			}
		}
	},
	data() {
		return {
			chartData: {
				categories: ['已开户', '未开户', '已撤销'],
				series: [
					// {
					// 	name: '农业银行',
					// 	data: [35, null, 10],
					// 	type: 'point',
					// 	color: '#13A4FE'
					// },
					// {
					// 	name: '建设银行',
					// 	data: [18, null, 30],
					// 	type: 'point',
					// 	color: '#FDCD37'
					// },
					// {
					// 	name: '中国银行',
					// 	data: [18, null, 30],
					// 	type: 'point',
					// 	color: '#59CBC7'
					// },
					// {
					// 	name: '工商银行',
					// 	data: [18, null, 20],
					// 	type: 'point',
					// 	color: '#A995FB'
					// },
					// {
					// 	name: '交通银行',
					// 	data: [18, null, 20],
					// 	type: 'point',
					// 	color: '#4E5FD2'
					// },
					// {
					// 	name: '其他',
					// 	data: [null, 30, null],
					// 	type: 'point',
					// 	color: '#C2CCD8'
					// }
				]
			}
		};
	},
	created() {
		this.init();
	},
	watch: {
		account(n) {
			this.init();
		}
	},
	methods: {
		init() {
			if (this.account) {
				let series = [];
				for (let i in this.account) {
					if (this.account[i].name == '未开户') {
						let w = this.account[i].value;
						series.push({
							name: '未开户',
							data: [null, w ? w : null, null],
							type: 'point',
							color: '#C2CCD8'
						});
					} else if (this.account[i].name == '已开户') {
						for (let j in this.account[i].data) {
							let y = this.account[i].data[j].account;
							series.push({
								name: this.account[i].data[j].bankType,
								type: 'point',
								data: [y ? y : null, null, null]
							});
						}
					}
				}
				for (let i in this.account) {
					if (this.account[i].name == '已撤销') {
						for (let j in this.account[i].data) {
							for (let k in series) {
								if (this.account[i].data[j].bankType == series[k].name) {
									let c = this.account[i].data[j].account;
									series[k].data[2] = c ? c : null;
									break;
								}
							}
						}
					}
				}
				let chartData = {
					categories: ['已开户', '未开户', '已撤销'],
					series: series
				};
				this.chartData = chartData;
			} else {
				this.chartData = {};
				console.error('首页统计图', '开户情况无数据');
			}
		}
	},
	computed: {
		opt() {
			return {
				extra: {
					column: {
						type: 'stack'
					}
				},
				legend: {
					show: true,
					position: 'bottom',
					backgroundColor: 'rgba(0,0,0,0)',
					borderColor: 'rgba(0,0,0,0)',
					borderWidth: 1,
					fontSize: 10,
					fontColor: '#666666',
					lineHeight: 20,
					hiddenColor: '#CECECE',
					itemGap: 10
				},
				yAxis: {
					disabled: false,
					disableGrid: false,
					gridType: 'dash',
					gridColor: '#CCCCCC',
					data: [
						{
							type: 'value',
							position: 'left',
							titleFontColor: '#666666',
							min: 0
						}
					]
				}
			};
		}
	}
};
</script>

<style></style>
